<!--

=========================================================
* Pixel Pro Bootstrap 4 UI Kit
=========================================================

* Product Page: https://themesberg.com/product/ui-kits/pixel-pro-premium-bootstrap-4-ui-kit
* Copyright 2019 Themesberg (https://www.themesberg.com)

* Coded by https://themesberg.com

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

-->
<!DOCTYPE html>
<html lang="en">

<head>
    @@include('./_head.html', {
        "path": "../..",
        "title": "Pixel Documentation - Typography"
    })
</head>

<body>
    <a href="#doc-index" class="btn btn-lg btn-primary btn-block rounded-0 d-lg-none" data-toggle="collapse" data-target="#doc-index" aria-expanded="false" aria-controls="doc-index">
        <svg class="icon fill-white" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 17C3 17.5523 3.44772 18 4 18H20C20.5523 18 21 17.5523 21 17V17C21 16.4477 20.5523 16 20 16H4C3.44772 16 3 16.4477 3 17V17ZM3 12C3 12.5523 3.44772 13 4 13H20C20.5523 13 21 12.5523 21 12V12C21 11.4477 20.5523 11 20 11H4C3.44772 11 3 11.4477 3 12V12ZM4 6C3.44772 6 3 6.44772 3 7V7C3 7.55228 3.44772 8 4 8H20C20.5523 8 21 7.55228 21 7V7C21 6.44772 20.5523 6 20 6H4Z" />
        </svg>
        <span class="h6 text-white">Menu</span>
    </a>
    <section class="container-fluid py-4">
        <div class="row">
            @@include('./_docs-sidebar.html', {
                "path": "../..",
                "docs-path": ".."
            })
            <!-- Content -->
            <div class="col-12 col-lg-10">
                <div class="row">
                    <div class="col-xl-10 col-lg-9 px-xl-5 px-lg-3 px-md-2 py-md-4">
                        <div class="border-bottom">
                            <h1>Typography</h1>
                            <p class="lead text-dark">Pixel makes use of the <a href="https://fonts.google.com/specimen/Poppins">Poppins
                                    Google Web Font</a> for beatiful and readable typography.</p>
                            <a href="https://getbootstrap.com/docs/4.3/content/typography/" target="_blank" class="btn btn-icon btn-primary mb-3">
                                <span class="btn-inner-icon"><i class="fas fa-info-circle"></i></span>
                                <span class="btn-inner-text">Bootstrap 4 documentation</span>
                            </a>
                        </div>
                        <div id="headings" class="my-5">
                            <h5 class="mb-3">Headings</h5>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-1" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-1" data-toggle="tab" href="#tab-content-1" role="tab" aria-controls="tab-link-1" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-2" data-toggle="tab" href="#tab-content-2" role="tab" aria-controls="tab-link-2" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent1">
                                            <div class="tab-pane fade show active" id="tab-content-1" role="tabpanel" aria-labelledby="tab-content-1">
                                                <h1>h1. Bootstrap heading</h1>
                                                <h2>h2. Bootstrap heading</h2>
                                                <h3>h3. Bootstrap heading</h3>
                                                <h4>h4. Bootstrap heading</h4>
                                                <h5>h5. Bootstrap heading</h5>
                                                <h6>h6. Bootstrap heading</h6>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-2" role="tabpanel" aria-labelledby="tab-content-2">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&#x3C;h1&#x3E;h1. Bootstrap heading&#x3C;/h1&#x3E;
&#x3C;h2&#x3E;h2. Bootstrap heading&#x3C;/h2&#x3E;
&#x3C;h3&#x3E;h3. Bootstrap heading&#x3C;/h3&#x3E;
&#x3C;h4&#x3E;h4. Bootstrap heading&#x3C;/h4&#x3E;
&#x3C;h5&#x3E;h5. Bootstrap heading&#x3C;/h5&#x3E;
&#x3C;h6&#x3E;h6. Bootstrap heading&#x3C;/h6&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="customized-headings" class="my-5">
                            <h5 class="mb-3">Customized headings</h5>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-2" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-3" data-toggle="tab" href="#tab-content-3" role="tab" aria-controls="tab-link-3" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-4" data-toggle="tab" href="#tab-content-4" role="tab" aria-controls="tab-link-4" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent2">
                                            <div class="tab-pane fade show active" id="tab-content-3" role="tabpanel" aria-labelledby="tab-content-3">
                                                <h1>
                                                    Fancy display heading
                                                    <small class="text-muted">With faded secondary text</small>
                                                </h1>
                                                <h2>
                                                    Fancy display heading
                                                    <small class="text-muted">With faded secondary text</small>
                                                </h2>
                                                <h3>
                                                    Fancy display heading
                                                    <small class="text-muted">With faded secondary text</small>
                                                </h3>
                                                <h4>
                                                    Fancy display heading
                                                    <small class="text-muted">With faded secondary text</small>
                                                </h4>
                                                <h5>
                                                    Fancy display heading
                                                    <small class="text-muted">With faded secondary text</small>
                                                </h5>
                                                <h6>
                                                    Fancy display heading
                                                    <small class="text-muted">With faded secondary text</small>
                                                </h6>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-4" role="tabpanel" aria-labelledby="tab-content-4">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&#x3C;h1&#x3E;
    Fancy display heading
    &#x3C;small class=&#x22;text-muted&#x22;&#x3E;With faded secondary text&#x3C;/small&#x3E;
&#x3C;/h1&#x3E;
&#x3C;h2&#x3E;
    Fancy display heading
    &#x3C;small class=&#x22;text-muted&#x22;&#x3E;With faded secondary text&#x3C;/small&#x3E;
&#x3C;/h2&#x3E;
&#x3C;h3&#x3E;
    Fancy display heading
    &#x3C;small class=&#x22;text-muted&#x22;&#x3E;With faded secondary text&#x3C;/small&#x3E;
&#x3C;/h3&#x3E;
&#x3C;h4&#x3E;
    Fancy display heading
    &#x3C;small class=&#x22;text-muted&#x22;&#x3E;With faded secondary text&#x3C;/small&#x3E;
&#x3C;/h4&#x3E; 
&#x3C;h5&#x3E;
    Fancy display heading
        &#x3C;small class=&#x22;text-muted&#x22;&#x3E;With faded secondary text&#x3C;/small&#x3E;
&#x3C;/h5&#x3E;
&#x3C;h6&#x3E;
    Fancy display heading
    &#x3C;small class=&#x22;text-muted&#x22;&#x3E;With faded secondary text&#x3C;/small&#x3E;
&#x3C;/h6&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="display-headings" class="my-5">
                            <h5 class="mb-3">Display headings</h5>
                            <p>Use <code class="text-danger">.display-1-*, .display-2-*</code> (eg. <code class="text-danger">.display-1-lg, .display-2-sm</code>) to increase the font size of text elements based on screen size.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-3" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-5" data-toggle="tab" href="#tab-content-5" role="tab" aria-controls="tab-link-5" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-6" data-toggle="tab" href="#tab-content-6" role="tab" aria-controls="tab-link-6" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent3">
                                            <div class="tab-pane fade show active" id="tab-content-5" role="tabpanel" aria-labelledby="tab-content-5">
                                                <h1 class="display-1">Display 1</h1>
                                                <h1 class="display-2">Display 2</h1>
                                                <h1 class="display-3">Display 3</h1>
                                                <h1 class="display-4">Display 4</h1>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-6" role="tabpanel" aria-labelledby="tab-content-6">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&#x3C;h1 class=&#x22;display-1&#x22;&#x3E;Display 1&#x3C;/h1&#x3E;
&#x3C;h1 class=&#x22;display-2&#x22;&#x3E;Display 2&#x3C;/h1&#x3E;
&#x3C;h1 class=&#x22;display-3&#x22;&#x3E;Display 3&#x3C;/h1&#x3E;
&#x3C;h1 class=&#x22;display-4&#x22;&#x3E;Display 4&#x3C;/h1&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="paragraphs" class="my-5">
                            <h5 class="mb-3">Paragraphs</h5>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-4" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-7" data-toggle="tab" href="#tab-content-7" role="tab" aria-controls="tab-link-7" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-8" data-toggle="tab" href="#tab-content-8" role="tab" aria-controls="tab-link-8" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent4">
                                            <div class="tab-pane fade show active" id="tab-content-7" role="tabpanel" aria-labelledby="tab-content-7">
                                                <p>Pixel is a beatifully crafted design system based on Bootstrap 4 Components. This theme was built following Bootstrap's methodologies by the heart. It has over xx components, xx sections and xx pages. It
                                                    is built using the Sass language and is heavily built with mixins and variables.</p>
                                                <p>It uses Gulp for running a local server, watching for changes, compiling CSS and building a distribution build. We also offer a classic version of the theme using only HTML, CSS and Javascript.</p>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-8" role="tabpanel" aria-labelledby="tab-content-8">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&#x3C;p&#x3E;Pixel is a beatifully crafted design system based on Bootstrap 4 Components. This theme was built following Bootstrap's methodologies by the heart.&#x3C;/p&#x3E;
&#x3C;p&#x3E;It uses Gulp for running a local server, watching for changes, compiling CSS and building a distribution build. We also offer a classic version of the theme using only HTML, CSS and Javascript.&#x3C;/p&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="lead-paragraphs" class="my-5">
                            <h5 class="mb-3">Lead paragraphs</h5>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-5" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-9" data-toggle="tab" href="#tab-content-9" role="tab" aria-controls="tab-link-9" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-10" data-toggle="tab" href="#tab-content-10" role="tab" aria-controls="tab-link-10" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent5">
                                            <div class="tab-pane fade show active" id="tab-content-9" role="tabpanel" aria-labelledby="tab-content-9">
                                                <p class="lead">Start your development with a Pixel Design System for Bootstrap 4. Themesberg makes beautiful products to help people with creative ideas succeed. Our company empowers millions of people.
                                                </p>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-10" role="tabpanel" aria-labelledby="tab-content-10">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
    &#x3C;p class=&#x22;lead&#x22;&#x3E;Start your development with a Pixel Design System for Bootstrap 4. Themesberg makes beautiful products to help people with creative ideas succeed. Our company empowers millions of people.&#x3C;/p&#x3E; 
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="inline-tags" class="my-5">
                            <h5 class="mb-3">Inline tags</h5>
                            <p>Use the following standard, inline text tags to modify your content.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-6" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-11" data-toggle="tab" href="#tab-content-11" role="tab" aria-controls="tab-link-11" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-12" data-toggle="tab" href="#tab-content-12" role="tab" aria-controls="tab-link-12" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent6">
                                            <div class="tab-pane fade show active" id="tab-content-11" role="tabpanel" aria-labelledby="tab-content-11">
                                                <p>You can use the mark tag to <mark>highlight</mark> text.</p>
                                                <p><del>This line of text is meant to be treated as deleted text.</del></p>
                                                <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
                                                <p><ins>This line of text is meant to be treated as an addition to the
                                                        document.</ins></p>
                                                <p><u>This line of text will render as underlined</u></p>
                                                <p><small>This line of text is meant to be treated as fine print.</small></p>
                                                <p><strong>This line rendered as bold text.</strong></p>
                                                <p><em>This line rendered as italicized text.</em></p>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-12" role="tabpanel" aria-labelledby="tab-content-12">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&#x3C;p&#x3E;You can use the mark tag to &#x3C;mark&#x3E;highlight&#x3C;/mark&#x3E; text.&#x3C;/p&#x3E;
&#x3C;p&#x3E;&#x3C;del&#x3E;This line of text is meant to be treated as deleted text.&#x3C;/del&#x3E;&#x3C;/p&#x3E;
&#x3C;p&#x3E;&#x3C;s&#x3E;This line of text is meant to be treated as no longer accurate.&#x3C;/s&#x3E;&#x3C;/p&#x3E;
&#x3C;p&#x3E;&#x3C;ins&#x3E;This line of text is meant to be treated as an addition to the document.&#x3C;/ins&#x3E;&#x3C;/p&#x3E;
&#x3C;p&#x3E;&#x3C;u&#x3E;This line of text will render as underlined&#x3C;/u&#x3E;&#x3C;/p&#x3E;
&#x3C;p&#x3E;&#x3C;small&#x3E;This line of text is meant to be treated as fine print.&#x3C;/small&#x3E;&#x3C;/p&#x3E;
&#x3C;p&#x3E;&#x3C;strong&#x3E;This line rendered as bold text.&#x3C;/strong&#x3E;&#x3C;/p&#x3E;
&#x3C;p&#x3E;&#x3C;em&#x3E;This line rendered as italicized text.&#x3C;/em&#x3E;&#x3C;/p&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="blockquotes" class="my-5">
                            <h5 class="mb-3">Blockquotes</h5>
                            <p>Want to quote some awesome people? We offer custom styles for the standard Bootstrap blockquotes.
                            </p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-7" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-13" data-toggle="tab" href="#tab-content-13" role="tab" aria-controls="tab-link-13" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-14" data-toggle="tab" href="#tab-content-14" role="tab" aria-controls="tab-link-14" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent7">
                                            <div class="tab-pane fade show active" id="tab-content-13" role="tabpanel" aria-labelledby="tab-content-13">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <blockquote class="blockquote text-center">
                                                            Themesberg makes beautiful products to help people with creative ideas succeed. Our company empowers millions of people.
                                                            <footer class="blockquote-footer mt-3 text-primary">Zoltan Szőgyényi
                                                            </footer>
                                                        </blockquote>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-14" role="tabpanel" aria-labelledby="tab-content-14">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&lt;blockquote class=&quot;blockquote text-center&quot;&gt;
    Themesberg makes beautiful products to help people with creative ideas succeed. Our company empowers millions of people.
    &lt;footer class=&quot;blockquote-footer mt-3 text-primary&quot;&gt;Zoltan Szőgy&eacute;nyi&lt;/footer&gt;
&lt;/blockquote&gt;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="lists" class="my-5">
                            <h5 class="mb-3">Ordered & unordered lists</h5>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-8" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-15" data-toggle="tab" href="#tab-content-15" role="tab" aria-controls="tab-link-15" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-16" data-toggle="tab" href="#tab-content-16" role="tab" aria-controls="tab-link-16" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent8">
                                            <div class="tab-pane fade show active" id="tab-content-15" role="tabpanel" aria-labelledby="tab-content-15">
                                                <ul>
                                                    <li>Minutes of the last meeting</li>
                                                    <li>Do we need yet more meetings?</li>
                                                    <li>Any other business
                                                        <ul>
                                                            <li>Programming</li>
                                                            <li>Web Design</li>
                                                            <li>Database</li>
                                                        </ul>
                                                    </li>
                                                    <li>Something funny</li>
                                                </ul>
                                                <hr>
                                                <ol>
                                                    <li>Minutes of the last meeting</li>
                                                    <li>Do we need yet more meetings?</li>
                                                    <li>Any other business
                                                        <ol>
                                                            <li>Programming</li>
                                                            <li>Web Design</li>
                                                            <li>Database</li>
                                                        </ol>
                                                    </li>
                                                    <li>Something funny</li>
                                                </ol>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-16" role="tabpanel" aria-labelledby="tab-content-16">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&#x3C;ul&#x3E;
    &#x3C;li&#x3E;Minutes of the last meeting&#x3C;/li&#x3E;
    &#x3C;li&#x3E;Do we need yet more meetings?&#x3C;/li&#x3E;
    &#x3C;li&#x3E;Any other business
        &#x3C;ul&#x3E;
            &#x3C;li&#x3E;Programming&#x3C;/li&#x3E;
            &#x3C;li&#x3E;Web Design&#x3C;/li&#x3E;
            &#x3C;li&#x3E;Database&#x3C;/li&#x3E;
        &#x3C;/ul&#x3E;
    &#x3C;/li&#x3E;    
    &#x3C;li&#x3E;Something funny&#x3C;/li&#x3E;
&#x3C;/ul&#x3E;
&#x3C;ol&#x3E;
    &#x3C;li&#x3E;Minutes of the last meeting&#x3C;/li&#x3E;
    &#x3C;li&#x3E;Do we need yet more meetings?&#x3C;/li&#x3E;
    &#x3C;li&#x3E;Any other business
        &#x3C;ol&#x3E;
            &#x3C;li&#x3E;Programming&#x3C;/li&#x3E;
            &#x3C;li&#x3E;Web Design&#x3C;/li&#x3E;
            &#x3C;li&#x3E;Database&#x3C;/li&#x3E;
        &#x3C;/ol&#x3E;
    &#x3C;/li&#x3E;    
    &#x3C;li&#x3E;Something funny&#x3C;/li&#x3E;
&#x3C;/ol&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 d-none d-lg-block py-md-1 doc-sidebar border-left">
                        <ul class="nav flex-column">
                            <li class="nav-item">
                                <a href="#headings" class="nav-link" data-smooth-scroll>Headings</a>
                            </li>
                            <li class="nav-item">
                                <a href="#customized-headings" class="nav-link " data-smooth-scroll>Customized headings</a>
                            </li>
                            <li class="nav-item">
                                <a href="#display-headings" class="nav-link " data-smooth-scroll>Display headings</a>
                            </li>
                            <li class="nav-item">
                                <a href="#paragraphs" class="nav-link " data-smooth-scroll>Paragraphs</a>
                            </li>
                            <li class="nav-item">
                                <a href="#lead-paragraphs" class="nav-link " data-smooth-scroll>Lead paragraphs</a>
                            </li>
                            <li class="nav-item">
                                <a href="#inline-tags" class="nav-link " data-smooth-scroll>Inline tags</a>
                            </li>
                            <li class="nav-item">
                                <a href="#blockquotes" class="nav-link " data-smooth-scroll>Blockquotes</a>
                            </li>
                            <li class="nav-item">
                                <a href="#lists" class="nav-link " data-smooth-scroll>Ordered & Unordered lists</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- End of content -->
            </div>
        </div>
    </section>
    @@include('./_scripts.html', {
        "path": "../.."
    })
</body>

</html>